<template>
  <!-- 主页 -->
  <div class="lyj-main">
    <ul>
      <!-- 点击Li去到详情页面，调用一个方法带他的电影数据过去 -->
      <li v-for="(item,index) in films" :key="index" @click="goDatails(item.filmId)">
        <a>
          <div class="imgDiv">
            <img :src="item.poster" alt>
          </div>
          <div class="rightDiv">
            <div class="H6div">
              <h6>{{ item.name }}</h6>
              <div>{{ item.filmType.name }}</div>
            </div>
            <div class="pinDiv">
              观众评分:
              <span style="color:#ff9665;">{{ item.grade }}</span>
            </div>
            <!-- zhuYanDiv方法，主演数组传进这个方法去，构建一个函数去遍历 -->
            <div class="zhuYanDiv">主演：{{ zhuYanDiv(item.actors) }}</div>
            <div class="guoJiaDiv">{{ item.nation }} | {{ item.runtime }}分钟</div>
          </div>
        </a>
        <!-- 点击addIsshowBox把item带到购物车 -->
        <div class="Ticket" @click.stop="isShow=!isShow,addFilms(item)">
          <a href="#">购票</a>
        </div>
      </li>
    </ul>
    <!-- 点击加载下一页 -->
    <div class="load-more" @click="loadMore">{{ loadMoreText }}</div>
    <!-- 遮罩层 -->
    <div class="opacityBox" v-if="isShow" @click="getTuiChu"></div>
    <!-- 购物车 -->
    <transition
      mode="out-in"
      appear
      enter-active-class="animated fadeInUp"
      leave-active-class="animated zoomOut"
    >
      <div class="shopBox" v-if="isShow">
        <div class="selectedBox">
          <span class="spankong" @click="getTuiChu">退出</span>
          <span class="yiXuanBox">已选商品</span>
          <div class="deleteFilm" @click="clearFilms">清空</div>
        </div>
        <div class="movieBox">
          <div class="commoDityBox" v-for="(item,index) in FilmsCard" :key="index">
            <span class="dity">{{ item.filmName }} {{ item.filmType}}</span>
            <span class="moneyBox">￥{{item.filmPrice}}</span>
            <span class="addOrLose">
              <button @click="minusFilm(item)">-</button>
              <input type="text" class="numText" disabled :value="findNum(item)">
              <button @click="addFilms(item)">+</button>
            </span>
          </div>
        </div>
        <div class="closingBox">
          <span class="moneyClos">
            总价:
            <span style="color: red;">￥{{ totalPrice }}</span>
          </span>
          <span class="kong">
            数量：
            <span style="color: red;">{{ totalNum }}</span>
          </span>
          <button class="btnClos">结算</button>
        </div>
      </div>
    </transition>
    <!-- 购物车 -->
  </div>
</template>

<script>
import axios from "axios"; //ajax请求的第三方包
import { mapMutations, mapState, mapGetters } from "vuex"; // 按需加载vuex的功能
export default {
  name: "NowPlay",
  data() {
    return {
      films: [],
      isShow: false,
      itemFilm: [], //购物车数据

      loadMoreText: "点击加载...",

      pageNum: 1, //当前页码
      pageSize: 5, //当前页数
      totalPage: 0 //总页数
    };
  },
  computed: {
    /**
     * 把仓库购物车的数据拿到小购物车,仓库的数据要在计算属性
     */
    ...mapState(["FilmsCard"]),
    /**
     * 计算总价格
     */
    ...mapGetters(["totalNum", "totalPrice"])
  },
  methods: {
    /**
     * 点击加号购买电影票,
     * 点击加号购买电影票,
     */
    ...mapMutations(["addFilms", "minusFilm", "clearFilms"]),

    /**
     * 购物车显示,并拉取到电影数据
     *  */
    // addIsshowBox(item) {
    //   this.isShow = !this.isShow;
    //   this.itemFilm.push(item); //保存上去
    //   // this.itemFilm.push("FilmsCard");
    //   // console.log(item);

    //   // // 传到vuex的addFilms 这方法里,携带这数据
    //   // this.$store.commit("addFilms", {
    //   //   filmId: item.filmId,
    //   //   filmName: item.name,
    //   //   filmPrice: parseInt(Math.random() * 21 + 10),
    //   //   filmNum: 1
    //   // })
    // },
    // 购物车隐藏
    getTuiChu() {
      this.isShow = !this.isShow;
    },
    /**
     * 获取电影数据(json文件)
     */
    getFilmName() {
      // 发送请求到后台请求数据的接口
      axios
        .get("/api/films/list", {
          //以api开头的就会触发正向代理(config下面的index.js)
          params: {
            // 第二个参数是get请求的参数
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }
        })
        .then(res => {
          // res不单单包含后台给的数据，还有一些额外的东西。
          // then解决ajax的回调地狱
          let result = res.data;
          // 一共多少页
          this.totalPage = Math.ceil(result.data.total / this.pageSize);

          // 判断是否还有更多页,当前页码大于总页数
          if (this.pageNum >= this.totalPage) {
            // 没有更多页面
            this.loadMoreText = "别拉了，我是有底线的...";
          }

          if (result.code === 0) {
            // 请求成功
            // this.films = result.data.films;
            // this.films = this.films.push(...result.data.films); //√
            this.films = this.films.concat(result.data.films);
          } else {
            // 请求失败
            alert(result.msg);
          }
        });
    },
    /**
     * 主演遍历
     */
    zhuYanDiv(actors) {
      let arr = [];
      arr = actors.map(item => {
        return item.name;
      });
      // join:数组转字符串
      return arr.join(" ");
    },
    /**
     * 加载更多
     */
    loadMore() {
      //页码大于总页数
      if (this.pageNum < this.totalPage) {
        this.pageNum++; //对当前页码加1
        this.getFilmName();
      }
    },
    /**
     * 点击去详情页
     */
    goDatails(id) {
      this.$router.push({
        // path: "/home/" + id //可以在后面拼接他的传过来的id
        // path: `/home/${id}` //es6的拼接模板，id会解析成一个变量
        name: "datailsFilm", //通过名字来传
        // path和params不能同时写，params和name一起用
        params: {
          filmId: id
        }
      });
    },
    /**
     * 电影票数量 查找当前这个电影
     */
    findNum(item) {
      // console.log(item);
      let filmId = item.filmId;
      // 判断当前这个 filmId 在store 中的FilmsCard 中存在不？

      let num = 0;
      this.$store.state.FilmsCard.forEach(item => {
        if (item.filmId === filmId) {
          num = item.filmNum;
        }
      });
      return num;
    }
  },
  // 创建之后请求电影数据
  created() {
    this.getFilmName();
  }
};
</script>

<style lang="scss">
@import "@/style/common/px2rem.scss";
// main=====
.lyj-main {
  width: 100%;
  flex: 1;
  overflow: auto;
  margin-bottom: px2rem(53);

  // main 的底部，必须要给main底部留出主页底部的高度
  // border-bottom: px2rem(15) solid rgb(165, 30, 30);

  ul {
    display: flex;
    flex: 1;
    box-sizing: border-box;
    padding-left: px2rem(15);
    // ul不给弹盒方向，会横向排列
    flex-direction: column;

    li {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      box-sizing: border-box;
      // flex-direction: column;
      padding: px2rem(15) px2rem(15) px2rem(15) px2rem(0);
      height: px2rem(124);
      border-bottom: px2rem(1) solid #ddd;

      a {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        text-decoration: none;

        .imgDiv {
          width: px2rem(66);
          height: 100%;
          margin-right: px2rem(10);

          img {
            width: px2rem(66);
          }
        }

        .rightDiv {
          display: flex;
          flex-direction: column;

          .H6div {
            display: flex;
            width: 100%;
            height: px2rem(25);
            align-items: center;

            h6 {
              color: #000;
              font-size: px2rem(18);
              font-weight: 500;
              margin-right: px2rem(10);
            }

            div {
              width: px2rem(20);
              height: px2rem(18);
              background: rgb(210, 214, 220);
              border-radius: px2rem(3);
              color: white;
              text-align: center;
              line-height: px2rem(18);
              font-size: px2rem(12);
            }
          }

          .pinDiv {
            margin-top: px2rem(3);
            font-size: px2rem(14);
            color: #373737;
          }

          .zhuYanDiv {
            margin-top: px2rem(3);
            font-size: px2rem(15);
            color: #373737;
            width: px2rem(200);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .guoJiaDiv {
            margin-top: px2rem(3);
            font-size: px2rem(14);
            color: #373737;
          }
        }
      }

      // 购票
      .Ticket {
        width: px2rem(70);
        height: px2rem(30);
        border: px2rem(1) solid rgb(255, 104, 36);
        border-radius: px2rem(3);
        position: absolute;
        top: 50%;
        right: px2rem(20);
        margin-top: px2rem(-13);

        a {
          display: block;
          width: px2rem(70);
          height: px2rem(30);
          line-height: px2rem(25);
          text-align: center;
          font-size: px2rem(16);
          color: rgb(255, 104, 36);
        }
      }
    }
  }
}
.load-more {
  height: px2rem(30);
  line-height: px2rem(30);
  text-align: center;
  font-size: px2rem(18);
}
// 购车
.shopBox {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: px2rem(200);
  position: fixed;
  bottom: 0;
  background: white;
  z-index: 100;
  max-width: 540px;
  // display: none;

  .selectedBox {
    display: flex;
    width: 100%;
    height: px2rem(50);
    background: #eee;
    .yiXuanBox {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
    }
    .spankong {
      display: flex;
      width: 20%;
      justify-content: center;
      align-items: center;
    }
    .deleteFilm {
      display: flex;
      width: 20%;
      height: px2rem(50);
      align-items: center;
      justify-content: center;
    }
  }
  .movieBox {
    height: px2rem(100);
    overflow: auto;
    .commoDityBox {
      display: flex;
      height: px2rem(50);
      width: 100%;
      padding-left: px2rem(10);
      border-bottom: px2rem(1) solid #eee;
      .dity {
        width: 50%;
        align-self: center;
      }
      .moneyBox {
        display: flex;
        width: 20%;
        justify-content: center;
        align-items: center;
        color: red;
      }
      .addOrLose {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: space-around;
        .numText {
          width: px2rem(30);
          text-align: center;
          border-radius: 20%;
          border: px2rem(1) solid #000;
          outline: none;
        }
        button {
          width: px2rem(30);
          height: px2rem(30);
          border-radius: 50%;
          outline: none;
        }
      }
    }
  }
  // 总价结算
  .closingBox {
    display: flex;
    height: px2rem(50);
    background: #eee;
    padding-right: px2rem(10);
    .moneyClos {
      display: flex;
      width: 30%;
      justify-content: center;
      align-items: center;
    }
    .kong {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
    }
    .btnClos {
      display: flex;
      width: 25%;
      background: #65ffb7;
      border-radius: px2rem(6);
      outline: none;
      font-size: px2rem(20);
      align-items: center;
      justify-content: center;
      color: #000;
    }
  }
}
// 遮罩层
.opacityBox {
  position: fixed;
  top: 0;
  width: 100%;
  height: 70%;
  background: #000;
  z-index: 100;
  opacity: 0.2;
  max-width: 540px;
  // display: none;
}
</style>
